import React from 'react';
import { Button, Form, Select, Input, Row, Col, Modal, Message, Table } from 'antd';
const FormItem = Form.Item;


let spanStyle = {
  position: 'relative',
  display: 'inline-block',
  width: 30,
  marginLeft: '-30px',
  textAlign: 'right',

}

let financeModal = React.createClass({

  handleCancel() {
    this.props.callBack()
  },

  rowKey(data) {
    return data.id;
  },

  render () {

    const { getFieldProps } = this.props.form;

    const typeMap = {
      101: '收房贷',
      102: '装修贷',
      103: '租约贷',
    };

    const repaymentTypeMap = {
      'installment': '等额本息',
      'onetime': '一次性还本付息',
      'month': '先息后本',
      'monthCapital': '等本金'
    }

    const payMap = {
      3: '季',
      6: '半年',
      12: '年',
    };

    const columns = [
      {
        title: '租约开始时间',
        dataIndex: 'startTime',
        width: 150,
      },
      {
        title: '租约结束时间',
        dataIndex: 'expireTime',
        width: 150,
      },
      {
        title: '租金',
        dataIndex: 'rent',
        width: 150,
      },
    ]


    let details = this.props.details;
    console.log(details)
    let repaymentType = repaymentTypeMap[this.props.details.repaymentType]
    let financeType = typeMap[this.props.details.type];
    let payType = `押${this.props.details.depositPeriod}付${this.props.details.rentPeriod}`;
    let rentType = this.props.details.isShared == 1 ? '整租' : '单租';
    let periodType = this.props.details.paymentWay === -1 ? true : false
    let fceType = this.props.details.type !== '101' && periodType ? true : false
    const btnRender = (<Button onClick={this.handleCancel}>关闭</Button>);
    let loanTime = this.props.details.loanTime ? this.props.details.loanTime.split(' ')[0] : ''
    console.log(loanTime)

    return (
      <Modal title="贷款详情" width={920} className="loan-modal"
             visible={this.props.visible}
             onCancel={this.handleCancel}
             footer={btnRender}>
        <Form inline form={this.props.form} >
          <div className="form-group">
            <h3><span>房屋情况</span></h3>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem
                  label="房屋地址">
                  <Input disabled {...getFieldProps('address')} />
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem
                  label="付款方式">
                  <Input disabled value={payMap[this.props.details.tenementCostPeriod]}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem
                  label="租约期限">
                  <Input disabled  value={`${details.tenementPeriod}个月`}/>
                </FormItem>
              </Col>
            </Row>
            {fceType ?
              <Row gutter={24}>
                <Col offset={2} sm={20}>
                  <Table rowKey={this.rowKey} columns={columns} dataSource={this.props.details.tenementRentList}
                         scroll={{x: 500, y: 100 }}
                         pagination={false}/>
                </Col>
              </Row> :
              <Row gutter={24}>
                <Col sm={8}>
                  <FormItem
                    label="房屋租金">
                    <Input disabled value={`${details.tenementRent}元/月`}/>
                  </FormItem>
                </Col>
                <Col sm={8}>
                  <FormItem
                    label="租约开始时间">
                    <Input disabled {...getFieldProps('startTime')}/>
                  </FormItem>
                </Col>
                {this.props.details.type !== '101' ?
                <Col sm={8}>
                  <FormItem
                    label="租约结束时间">
                    <Input disabled {...getFieldProps('endTime')}/>
                  </FormItem>
                </Col> : null}
              </Row>
            }
          </div>
          {this.props.details.type === '103' ?
          <div className="form-group">
            <h3><span>租客情况</span></h3>
              <Row gutter={24}>
                <Col sm={8}>
                  <FormItem
                    label="租客姓名">
                    <Input disabled {...getFieldProps('renterName')}/>
                  </FormItem>
                </Col>
                <Col sm={8}>
                  <FormItem
                    label="付款方式">
                    <Input disabled value={payType}/>
                  </FormItem>
                </Col>
                <Col sm={8}>
                  <FormItem
                    label="租客月租金">
                    <Input disabled value={`${details.roomRent}元/月`} />
                  </FormItem>
                </Col>
              </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem
                  label="租约开始时间">
                  <Input disabled {...getFieldProps('rentStartTime')}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem
                  label="租约结束时间">
                  <Input disabled {...getFieldProps('rentEndTime')}/>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem
                  label="出租类型">
                  <Input disabled value={rentType}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem
                  label="租约期限">
                  <Input disabled  value={`${details.contractPeriod}月`}/>
                </FormItem>
              </Col>
            </Row>
          </div>: null}
          <div className="form-group">
            <h3><span>贷款情况</span></h3>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem
                  label="申请借款金额">
                  <Input disabled {...getFieldProps('applyAmount')} />
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem
                  label="申请借款期限">
                  <Input disabled value={`${details.applyPeriod}个月`}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem
                  label="借款类型">
                  <Input disabled value={financeType}/>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem
                  label="联系人">
                  <Input disabled {...getFieldProps('contactUser')} />
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem
                  label="联系电话">
                  <Input disabled {...getFieldProps('contactPhone')} />
                </FormItem>
              </Col>
            </Row>
          </div>
          <div className="form-group">
            <h3><span>批贷情况</span></h3>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem
                  label="批贷金额">
                  <Input disabled {...getFieldProps('amount')} />
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem
                  label="批贷利率(%)">
                  <Input disabled value={`${details.interestRate}%`}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem
                  label="还款方式">
                  <Input disabled value={repaymentType} />
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem
                  label="批贷期限">
                  <Input disabled value={`${details.period}个月`}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem
                  label="放款时间">
                  <Input disabled value={loanTime} />
                </FormItem>
              </Col>
            </Row>
          </div>
        </Form>
      </Modal>
    );
  }
});

financeModal = Form.create()(financeModal);
export default financeModal